<template>
  <!-- 发表评论 -->
  <div class="comment-box" :class="{hasBottom:isBottom}">
    <input type="text" placeholder="发表评论" v-model="comment" required />
    <span @click="handleSendComment">发送</span>
  </div>
</template>

<script>
import { comment } from "@/request/api";
export default {
  props: {
    // commenttype:0: 歌曲 1: mv 2: 歌单 3: 专辑
    id: {
      type: Number,
      default: 0
    },
    commenttype: {
      type: Number,
      default: 0
    },
    t: {
      type: Number,
      default: 1
    },
    isBottom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      comment: ""
    };
  },
  computed: {
    normalId: function() {
      return this.id;
    }
  },
  methods: {
    async handleSendComment() {
      if (!this.comment) {
        this.$toast({
          position: "bottom",
          message: "评论为空"
        });
        return;
      }
      this.$toast.allowMultiple();
      let loadingToast = this.$toast.loading({
        forbidClick: true,
        duration: 1000,
        message: "评论中"
      });
      const res = await comment({
        t: 1,
        type: 1,
        id: this.normalId,
        content: this.comment
      });
      if (res.code === 200) {
        this.comment = "";
        loadingToast.clear();
        this.$toast({
          position: "bottom",
          message: "评论成功"
        });
        this.$emit("updateComment");
      }
      if (res.code === 250) {
        loadingToast.clear();
        this.$toast(res.dialog.subtitle);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.comment-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  height: 45px;
  .flex-row-nowrap;
  &.hasBottom {
    bottom: 60px;
    &:after {
      content: "";
      width: 100%;
      margin: 0 auto;
      height: 1px;
      background-color: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      opacity: 0.2;
      right: 0;
    }
  }
  z-index: 777777;
  input {
    border: none;
    flex: 1;
    font-size: 14px;
    height: 45px;
    padding-left: 18px;
    color: #fff;
    background: #333;
  }
  span {
    font-size: 14px;
    padding: 0 10px;
  }
}
</style>